<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 Highcharts 图表</title>
</head>
<body>
<!-- 图表容器 DOM -->
<br/>
<div class="layui-table-tool">
    <div class="layui-table-tool-temp">
        <div class="layui-btn-container">
            <button id="excel" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="getCheckData">导出EXCEL</button>
        </div>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">


            <div class="layui-card pull-left" style="margin-left: 200px">
                <div class="layui-card-body">
                    <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-heapcol">
                        <div id="containers" style="width: 600px;height:400px;"></div>
                    </div>
                </div>
            </div>


            <div class="layui-card pull-left" style="margin-left: 100px">
                <div class="layui-card-body">
                    <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-normcol">
                        <div id="zhexian" style="width: 600px;height:400px;"></div>
                    </div>
                </div>
            </div>
            {if $data['getper'] neq ''}
            <div class="layui-card pull-left" style="margin-left: 100px">
                <table class="layui-table" lay-skin="line">
                    <thead>
                    <tr>
                        <th class='text-left nowrap'>会员类型</th>
                        <th class='text-left nowrap'>会员个数</th>
                        <th class='text-left nowrap'>占总会员百分比</th>
                    </tr>
                    </thead>
                    <tbody>
                    {foreach $data['getper'] as $v}
                        <tr>
                            <td>{$v.name}</td>
                            <td>{$v.num}</td>
                            <td>{$v.per}</td>
                        </tr>
                    {/foreach}
                    </tbody>
                </table>
            </div>
            {/if}
            {if $data['money'] neq ''}
            <div class="layui-card pull-left" style="margin-left: 100px">
                <table class="layui-table" lay-skin="line">
                    <thead>
                    <tr>
                        <th class='text-left nowrap'>累计交易金额(元)</th>
                        <th class='text-left nowrap'>今日交易金额(元)</th>
                        <th class='text-left nowrap'>累计交易量(笔)</th>
                        <th class='text-left nowrap'>今日交易量(笔)</th>
                        <th class='text-left nowrap'>老顾客</th>
                        <th class='text-left nowrap'>新顾客</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>{$data.money.total_price}</td>
                        <td>{$data.money.today}</td>
                        <td>{$data.money.longOrderNum}</td>
                        <td>{$data.money.todayOrderNum}</td>
                        <td>{$data.money.usCouNum}</td>
                        <td>{$data.money.usCouToNum}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            {/if}

            {if $data['withdrawa'] neq ''}
            <div class="layui-card pull-left" style="margin-left: 100px">
                <table class="layui-table" lay-skin="line">
                    <thead>
                    <tr>
                        <th class='text-left nowrap'>累计提现金额(元)</th>
                        <th class='text-left nowrap'>累计提现量(笔)</th>
                        <th class='text-left nowrap'>今日提现金额（元)</th>
                        <th class='text-left nowrap'>今日提现量（笔）</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>{$data.withdrawa.money}</td>
                        <td>{$data.withdrawa.count}</td>
                        <td>{$data.withdrawa.newMoney}</td>
                        <td>{$data.withdrawa.newnum}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            {/if}

            {if $data['overflow'] neq ''}
            <div class="layui-card pull-left" style="margin-left: 100px">
                <table class="layui-table" lay-skin="line">
                    <thead>
                    <tr>
                        <th class='text-left nowrap'>累计溢出金额(元)</th>
                        <th class='text-left nowrap'>累计溢出量(笔)</th>
                        <th class='text-left nowrap'>今日溢出金额（元)</th>
                        <th class='text-left nowrap'>今日溢出量（笔）</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>{$data.overflow.money}</td>
                        <td>{$data.overflow.num}</td>
                        <td>{$data.overflow.moneytoday}</td>
                        <td>{$data.overflow.todaynum}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            {/if}

            {if $data['capital'] neq ''}
            <div class="layui-card pull-left" style="margin-left: 100px">
                <table class="layui-table" lay-skin="line">
                    <thead>
                    <tr>
                        <th class='text-left nowrap'>累计满额用户量</th>
                        <th class='text-left nowrap'>今日满额用户量(笔)</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>{$data.capital.maxPay}</td>
                        <td>{$data.capital.todayMaxPay}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            {/if}
        </div>
    </div>
</div>


<!-- 引入 highcharts.js -->
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script>
    $(function() {
        $.ajax({
            type: 'get',
            url: '/admin/index/getper',
            dataType:  'json',
            success: function(data){
                bingtu(data)
            }
        });

        function bingtu(e) {
            var cArr = [];
            if(e && e.length>0){
                e.forEach(function (value,index,arr) {
                    cArr.push({});
                    cArr[index]["name"] = arr[index]["name"];
                    cArr[index]["y"] = arr[index]["per"];
                })
            }
            //debugger;
            Highcharts.chart('containers', {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                title: {
                    text: '家富宝用户，历史角色比列图'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },
                credits: {
                    enabled: false
                },
                series: [{
                    name: '占总会员的百分比',
                    colorByPoint: true,
                    data: cArr
                }]
            });
        }

        $.ajax({
            type: 'get',
            url: '/admin/index/getzhexian',
            dataType:  'json',
            success: function(data){
                zhexiantu(data)
            }
        });

        function zhexiantu(x) {

            var zhexian = Highcharts.chart('zhexian', {
                chart: {
                    type: 'spline'
                },
                title: {
                    text: '最近7天交易走势'
                },

                xAxis: {
                    categories: x.time
                },
                yAxis: {
                    title: {
                        text: '金额 单位/元'
                    },
                    labels: {
                        formatter: function () {
                            return this.value;
                        }
                    }
                },
                credits: {
                    enabled: false
                },
                tooltip: {
                    crosshairs: true,
                    shared: true
                },
                plotOptions: {
                    spline: {
                        marker: {
                            radius: 4,
                            lineColor: '#666666',
                            lineWidth: 1
                        }
                    }
                },
                series: [{
                    name: '原价',
                    data: x.data
                },
                    {
                    name: '总价',
                    data: x.dataprice
                },
                    {
                        name: '税金',
                        data: x.datatax
                    },
                    {
                        name: '服务费',
                        data: x.dataservice
                    },
                ]

            })
        };

    })
    $('#excel').on('click',function () {
        layer.confirm('您是确定要导出数据？', {
            btn: ['确认','点错了'] //按钮
        },  function(){
            window.location.replace("http://www.zdtxadmin.com/admin/Index/getExcel");
            layer.msg('导出成功', {
                time: 20000, //20s后自动关闭
                btn: ['明白了', '知道了']
            });
        });

    })

</script>
</body>
</html>